<!DOCTYPE html>
<html>
<head>
	<title>PhotoPoint</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link href="css/styles.css" type="text/css" rel="stylesheet" />
	<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" >
	<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript" src="js/klass.min.js"></script>
	<script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>	
	
	<script type="text/javascript">
		(function(window, PhotoSwipe){

			document.addEventListener('DOMContentLoaded', function(){
				var options = {},
				instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

			}, false);
		}(window, window.Code.PhotoSwipe));
		
	</script>
	
</head>
<body>

<div data-role="page">

	<!-- 	HEADER -->
	<div id="header" data-role="header">
		<a href="javascript:history.back();" data-icon="back" data-direction="reverse" data-rel="back">Back</a>
		<!-- height="30" -->
		<h1><img src="img/logo.jpg"  height="20";></h1>
		
	</div><!-- /header -->

	<!-- 	PAGE content -->
	<div data-role="content">
	
		<div id="MainContent">
		
			<div class="page-content">
				<h1>PhotoSwipe</h1>
			</div>
			
			<ul id="Gallery" class="gallery">
				{{str2html .imglst}}
			</ul>
			
		</div>	

	</div><!-- /content -->
	
	<!-- 	FOOTER -->
	<div data-role="footer">
		<h4>Copyright 2013 PhotoPoint</h4>
	</div><!-- /footer -->
	
</body>
</html>
